import React, { useState, useEffect } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { BackButton, LoadingSpinner } from '../../components';
import api from '../../../../shared/api';
import { formatPrice } from '../../../../shared/utils';
import './index.css';

const ProductPage: React.FC = () => {
  const { id } = useParams<{ id: string }>();
  const navigate = useNavigate();
  const [product, setProduct] = useState<any>(null);
  const [loading, setLoading] = useState(true);
  const [currentImageIndex, setCurrentImageIndex] = useState(0);

  // 加载商品详情
  useEffect(() => {
    const loadProduct = async () => {
      if (!id) return;
      
      try {
        setLoading(true);
        const productData = await api.product.getProductById(id);
        setProduct(productData);
      } catch (error) {
        console.error('加载商品详情失败:', error);
      } finally {
        setLoading(false);
      }
    };

    loadProduct();
  }, [id]);

  const handleBack = () => {
    navigate(-1);
  };

  const handleAddToCart = () => {
    // TODO: 添加到购物车逻辑
    console.log('添加到购物车:', product);
  };

  const handleBuyNow = () => {
    // TODO: 立即购买逻辑
    navigate('/mall/order/create', { state: { product } });
  };

  if (loading) {
    return (
      <div className="product-page">
        <div className="product-page__loading">
          <LoadingSpinner />
        </div>
      </div>
    );
  }

  if (!product) {
    return (
      <div className="product-page">
        <div className="product-page__error">
          <div>商品不存在</div>
          <button onClick={handleBack}>返回</button>
        </div>
      </div>
    );
  }

  return (
    <div className="product-page">
      {/* 头部 */}
      <div className="product-page__header">
        <BackButton onClick={handleBack} />
        <div className="product-page__header-title">商品详情</div>
        <div className="product-page__header-actions">
          <span>🛒</span>
          <span>⭐</span>
        </div>
      </div>

      {/* 商品图片 */}
      <div className="product-page__images">
        <div className="product-page__main-image">
          <img 
            src={product.images?.[currentImageIndex] || product.image} 
            alt={product.name}
          />
        </div>
        {product.images && product.images.length > 1 && (
          <div className="product-page__image-dots">
            {product.images.map((_: any, index: number) => (
              <span
                key={index}
                className={`product-page__dot ${index === currentImageIndex ? 'active' : ''}`}
                onClick={() => setCurrentImageIndex(index)}
              />
            ))}
          </div>
        )}
      </div>

      {/* 商品信息 */}
      <div className="product-page__info">
        <div className="product-page__price">
          <span className="product-page__current-price">
            {formatPrice(product.price)}
          </span>
          {product.originalPrice && product.originalPrice > product.price && (
            <span className="product-page__original-price">
              {formatPrice(product.originalPrice)}
            </span>
          )}
        </div>
        
        <div className="product-page__name">{product.name}</div>
        
        <div className="product-page__meta">
          <span>销量 {product.sales || 0}</span>
          <span>库存 {product.stock || 0}</span>
        </div>
      </div>

      {/* 商品描述 */}
      <div className="product-page__description">
        <div className="product-page__section-title">商品详情</div>
        <div className="product-page__description-content">
          {product.description || '暂无详细描述'}
        </div>
      </div>

      {/* 底部操作栏 */}
      <div className="product-page__actions">
        <button 
          className="product-page__add-cart-btn"
          onClick={handleAddToCart}
        >
          加入购物车
        </button>
        <button 
          className="product-page__buy-now-btn"
          onClick={handleBuyNow}
        >
          立即购买
        </button>
      </div>
    </div>
  );
};

export default ProductPage; 